<template>
  <div class="footer">
    <div class="footer-upper">
      <p class="upper-p iconfont icon-shield">7天无理由退换货</p>
      <p class="upper-p iconfont icon-shield">满99元全场免邮</p>
      <p class="upper-p1 iconfont icon-shield">100%品质保证</p>
    </div>
    <p class="iconfont icon-github"></p>
    <div class="footer-below">
      <div class="footer-nav">
        <p @click="toTop">首页</p>
        <span>|</span>
        <p>全部商品</p>
        <span>|</span>
        <p>关于我们</p>
      </div>
      <p class="below-p">商城版权所有 © 2012-2021</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'wFooter',
  methods: {
    toTop(){
      document.documentElement.scrollTop = 0
      this.$router.push('/')
    }
  },
}
</script>

<style scoped>
.footer {
  background-color: #2f2f2f;
  padding: 0 0 20px;
}
.footer-upper {
  height: 145px;
  color: #fff;
  display: flex;
  justify-content: center;
  line-height: 145px;
  font-size: 20px;
  border-bottom: 1px solid #3d3d3d;
}
.upper-p {
  margin-right: 210px;
}
.icon-shield {
  font-size: 20px;
}

.footer-below {
  color: #888888;
  font-size: 16px;
}
.icon-github {
  color: #b0b0b0;
  font-size: 50px;
  text-align: center;
  padding: 20px 0 5px;
}
.footer-nav {
  display: flex;
  justify-content: center;
}
.footer-nav span {
  padding: 0 22px;
}
.footer-nav p:hover {
  color: #e6e6e6;
  cursor: pointer;
}
.below-p {
  text-align: center;
  margin: 20px 0;
}
</style>
